<template>
  <van-button v-if="!hidden"
              :size="size"
              :type="type"
              :icon="icon"
              :disabled="disabled"
              :loading="loading"
              :class="['rf-button', calcClass]"
              :style="calcStyle"
              @click="_onClick">{{ text }}
  </van-button>
</template>
<script>
import _ from "lodash";
import MobileVjsonMix from '../MobileVjsonMix'
import {Button} from 'vant'
import {MobileButton} from '../../Defaults'

export default {
  mixins: [MobileVjsonMix],
  data() {
    const vjson = _.defaults(this.vjson, MobileButton)

    return {
      type: vjson.type,
      size: vjson.size,
      icon: vjson.icon,
      disabled: vjson.disabled,
      loading: vjson.loading,
      text: vjson.text,
      hidden: vjson.hidden,
    }
  },
  methods: {
    _onClick() {
      system.globalLoadingButtonInstance = this
      this.runEvent('click', ...arguments)
      system.globalLoadingButtonInstance = null
    },
  },
  install(Vue) {
    Vue.use(Button)
    Vue.component('MobileVjsonButton', this)
  }
}
</script>